<template>
  <!-- 搜索用户 -->
  <div class="sc-user">
    <search-not-found v-if="!found"></search-not-found>
    <div v-if="found">
      <div class="sc-user-main">
        <ul class="sc-user-main-ul clearfix">
          <li
            class="sc-user-main-item"
            v-for="item in users"
            :key="item.userId"
          >
            <div class="sc-item-left">
              <a href="javascript:;" @click="clickUserDetail(item.userId)">
                <img
                  :src="item.avatarUrl"
                  :alt="item.nickname"
                  class="sc-item-pic"
                />
              </a>
            </div>
            <div class="sc-item-hd">
              <h4 class="sc-item-name">
                <a href="javascript:;" @click="clickUserDetail(item.userId)">
                  {{ item.nickname }}
                </a>
              </h4>
              <div class="sc-item-signature" v-if="item.signature != ''">
                {{ item.signature }}
              </div>
            </div>
            <div class="sc-item-playlist">歌单：{{ item.playlistCount }}</div>
            <div class="sc-item-followeds">粉丝：{{ item.followeds }}</div>
          </li>
        </ul>
      </div>
      <div class="user-el-pagination" v-if="userCount > 30">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="30"
          layout="prev, pager, next, jumper"
          :total="userCount"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SearchNotFound from "views/search/child/SearchNotFound";

export default {
  components: {
    SearchNotFound,
  },
  data() {
    return {
      users: [],
      currentPage: 1,
      userCount: 0,
      found: true,
    };
  },
  mounted() {
    this.getSearchUser();
  },
  methods: {
    clickUserDetail(id) {
      this.playUserDetail(id);
    },
    handleCurrentChange() {
      this.getSearchUser();
      document.documentElement.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    getSearchUser() {
      this.axios({
        url:
          "/cloudsearch?type=1002&keywords=" +
          this.$store.state.MInput +
          "&offset=" +
          (this.currentPage - 1) * 30,
      })
        .then((res) => {
          if (!res.data.result || !res.data.result.userprofileCount) {
            this.found = false;
          } else {
            this.users = res.data.result.userprofiles;
            this.userCount = res.data.result.userprofileCount;
            console.log(this.users);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.sc-user {
  margin-bottom: 50px;
  padding: 20px;
  overflow: hidden;
}
.sc-user-main-item {
  position: relative;
  height: 80px;
  line-height: 80px;
  border-radius: 5px;
  background-color: var(--color-theme-light-4);
}
.sc-user-main-item:nth-child(odd) {
  background-color: var(--color-theme-light-5);
}
.sc-item-left {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 60px;
  height: 60px;
  overflow: hidden;
}
.sc-item-left a {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
}
.sc-item-pic {
  width: 100%;
  height: 100%;
}
.sc-item-hd {
  float: left;
  margin-left: 100px;
  width: 60%;
}
.sc-item-hd h4 {
  height: 50px;
  line-height: 50px;
  font-weight: 400;
}
.sc-item-signature {
  height: 30px;
  line-height: 24px;
  font-size: 14px;
  color: #999;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-item-playlist,
.sc-item-followeds {
  float: left;
  margin-left: 20px;
  width: 12%;
  font-size: 14px;
  color: #999;
}
.sc-user .user-el-pagination {
  position: relative;
  text-align: center;
  margin: 20px auto;
}
</style>